<!doctype html>
<html lang="zh-cn"xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>散标详情</title>
    <link th:replace="includeJs::includeJs">
    <link th:replace="includeJs::layui_js">

    <link rel="stylesheet" th:href="@{/css/account/lay-cz.css}">
    <style>
        hr{
            margin: 0px;
        }

        tr{
            height: 50px;
        }
        input::-webkit-input-placeholder{
            font-size: 12px;
            color: #999!important;
        }
        .loose-bid{
            margin-top: 20px;
            float: left;
        }
        .name{
            font-size: 14px;
            color: #999;
            width: 90px;
        }
        .value{
            font-size: 16px;
            color: #333;
            width: 240px;
        }
        .borrower-title{
            padding-left: 20px;
            width: 70px;
            height: 50px;
            color: #999;
        }
        .borrower-value{
            width: 230px;
            height: 50px;
            color: #333;
        }
        .layui-table tr{
            height: 60px !important;
            transition: all .3s;
            -webkit-transition: all .3s;
        }
        .layui-table thead tr{
            background-color: #fdfdfd!important;
        }
        .layui-table tbody tr{
            background-color: #fdfdfd!important;
        }
        .layui-tab-title li{
            width: 120px!important;
        }

    </style>
</head>
<body>
<link th:replace="includeJs::dingding_header">
<link th:replace="includeJs::dingding_nav">
<div style="padding: 20px; background-color: #eee">
    <div style="background-color: white; margin: 0px auto; width: 1000px; height: 300px">
        <div style="padding: 15px;padding-left: 20px">
            <span style="font-size: 20px; color: #333;" th:text="'NO.'+${looseBid.id}">NO.1</span>
            <span style="margin-left: 10px; color: #777; font-size: 14px;">借款有风险，投资需谨慎！</span>
        </div>
        <hr>
        <div style="padding: 30px; width: 540px; height: 186px; float: left;">
            <div style="height: 70px; float: left">
                <div style="margin-left: 5px; color: #666; margin-bottom: 10px;">年利率</div>
                <div style="font-size: 32px; color: #FF5722;" th:text="${looseBid.apr}">12.88%</div>
            </div>
            <div style="margin-left:80px; height: 70px; float: left">
                <div style="margin-left: 5px; color: #666; margin-bottom: 10px;">借款金额</div>
                <div style="font-size: 28px; color: #333;" th:text="${looseBid.money}+'元'">10,000.00元</div>
            </div>
            <div style="margin-left:80px; height: 70px; float: left">
                <div style="color: #666; margin-bottom: 10px;">还款期限</div>
                <div>
                    <span style="font-size: 32px" th:text="${looseBid.month}">6</span>
                    <span>个月</span>
                </div>
            </div>
            <table border="0px" class="loose-bid">
                <tr th:if="${looseBid.status == 1}">
                    <td class="name">申请日</td>
                    <td class="value" th:text="${#dates.format(looseBid.applyDate, 'yyyy-MM-dd')}">2020/06/28</td>
                    <td class="name">风险等级</td>
                    <td class="value" th:text="${looseBid.riskGrade}">A</td>
                </tr>
                <tr th:if="${looseBid.status == 2}">
                    <td class="name">起息日</td>
                    <td class="value" th:text="${#dates.format(looseBid.valueDate, 'yyyy-MM-dd')}">2020/06/28</td>
                    <td class="name">风险等级</td>
                    <td class="value" th:text="${looseBid.riskGrade}">A</td>
                </tr>
                <tr>
                    <td class="name">还款方式</td>
                    <td class="value" th:text="${looseBid.refundType}">等额本息</td>
                    <td class="name">还款来源</td>
                    <td class="value" th:text="${looseBid.refundSource}">工资收入</td>
                </tr>
            </table>
        </div>
        <div style="background-color: #fafafa; padding: 50px; padding-bottom: 0px; width: 300px; height: 196px; float: left" th:if="${looseBid.status == 1}">
            <div >
                <span style="color: #666">账户余额</span>
                <span style="color: #F44336" th:text="${myUserInfo.money}">0.00</span>
                <span style="color: #666">元</span>
                <a style="float: right;color: #006cc2;" href="/recharge" target="_blank">充值</a>
            </div>
            <div style="margin-top: 10px">
                <input id="moneyInput" class="layui-input" placeholder="请输入出借的金额，为50的倍数" oninput = "value=value.replace(/[^\d]/g,'')" maxlength="9" autocomplete="new-password">
            </div>
            <div class="tip" style="margin-top: 5px; display: none">
                <span style="font-size: 12px; color: #f44336d9">出借金额必须为50的倍整数</span>
            </div>
            <div style="margin-top: 10px">
                <span style="color: #999; font-size: 12px" th:text="'本标剩余金额 ' + ${looseBid.money - sumMoney} + ' 元'">本标剩余金额 8000 元</span>
            </div>
            <div style="margin-top: 10px">
                <button id="loanBtn" type="button" class="layui-btn layui-btn-fluid" style="background-color: #ff7e22">出借</button>
            </div>
        </div>
        <div style="background-color: #fafafa; padding: 30px; width: 340px; height: 186px; float: left" th:if="${looseBid.status == 2}">
            <div style="height: 70px;">
                <div style="margin-left: 5px; color: #666; margin-bottom: 10px;">剩余期数</div>
                <div>
                    <span style="font-size: 36px; color: #FF5722;" th:text="${bdMonth}">6</span>
                    <span style="font-size: 18px">个月</span>
                </div>
            </div>
            <div style="height: 70px; margin-top: 50px">
                <div style="color: #999;">下一还款日</div>
                <div title="每个还款日的间隔为30天" style="margin-top: 10px; font-size: 20px; color: #333;" th:text="${#dates.format(nextRepayment, 'yyyy-MM-dd')}">2020/07/28</div>
            </div>
            <img th:src="@{/img/invest/REPAYING.png}" style="position: absolute; width: 150px; top: 300px; left: 1060px;">
        </div>
    </div>
    <div style="background-color: white; margin: 0px auto; width: 1000px;">
        <div class="layui-tab layui-tab-card">
            <ul class="layui-tab-title">
                <li class="layui-this">散标详情</li>
                <li>投标记录</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div style="padding: 10px">
                        <span style="font-size: 18px; color: #333;">借贷人信息</span>
                    </div>
                    <hr>
                    <div style="padding: 10px;">
                        <table border="0px">
                            <tr>
                                <div>
                                    <td class="borrower-title">昵称</td>
                                    <td class="borrower-value" th:text="${user.nickName}">小泽权</td>
                                </div>
                                <div>
                                    <td class="borrower-title">姓名</td>
                                    <td class="borrower-value" th:text="${#strings.substring(userInfo.getRealName(),0,1)}+'**'">钟**</td>
                                </div>
                                <div>
                                    <td class="borrower-title">身份证号</td>
                                    <td class="borrower-value" th:text="${#strings.substring(userInfo.getIdCard(),0,2)}+'**************'+${#strings.substring(userInfo.getIdCard(),userInfo.getIdCard().length()-2,userInfo.getIdCard().length())}">36**************35</td>
                                </div>
                            </tr>
                            <tr>
                                <td class="borrower-title">学历</td>
                                <td class="borrower-value" th:text="${looseBid.getEducationBackground()}">未获取</td>
                                <td class="borrower-title">婚姻</td>
                                <td class="borrower-value" th:text="${looseBid.getMarriage()}">未婚</td>
                                <td class="borrower-title">月收入</td>
                                <td class="borrower-value" th:text="${looseBid.getMonthlyProfit()}">5k~8k</td>
                            </tr>
                            <tr>
                                <td class="borrower-title">房产</td>
                                <td class="borrower-value" th:text="${looseBid.getHouseProperty()}">无</td>
                                <td class="borrower-title">车产</td>
                                <td class="borrower-value" th:text="${looseBid.getCarProduction()}">无</td>
                            </tr>
                        </table>
                    </div>
                    <div style="padding: 10px">
                        <span style="font-size: 18px; color: #333;">信用信息</span>
                    </div>
                    <hr>
                    <div style="padding: 10px">
                        <table border="0px">
                        <tr>
                            <td class="borrower-title">申请借款</td>
                            <td class="borrower-value">1次</td>
                            <td class="borrower-title">成功借款</td>
                            <td class="borrower-value">1次</td>
                            <td class="borrower-title">借款总额</td>
                            <td class="borrower-value" th:text="${looseBid.money} + '元'">22,500.00元</td>
                        </tr>
                        <tr>
                            <td class="borrower-title">逾期次数</td>
                            <td class="borrower-value">0次</td>
                            <td class="borrower-title">逾期金额</td>
                            <td class="borrower-value">0.00元</td>
                            <td class="borrower-title">还清次数</td>
                            <td class="borrower-value">0次</td>
                        </tr>
                    </table>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div style="padding: 10px">
                        <span style="font-size: 14px; color: #666;" th:text="'加入人次 ' + ${lbBidMap.size()} + '人,出借总额 '+ ${sumMoney} +'元'">加入人次 33，出借总额 5,000.00元</span>
                    </div>
                    <hr>
                    <div style="padding: 10px">
                        <table class="layui-table" lay-even lay-skin="nob">
                            <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>投标人</th>
                                    <th>投标金额</th>
                                    <th>投标时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr th:each="bid,bidStat:${lbBidMap}">
                                    <td th:text="${bidStat.index+1}">1</td>
                                    <td th:text="${bid.userName}">柚***帅</td>
                                    <td th:text="${bid.money}">50.00元</td>
                                    <td th:text="${#dates.format(bid.bidDate, 'yyyy年MM月dd日 hh:mm')}">2020年06月29日 08:03</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div  id="password-div" class="password-div" style="display: none;margin-left: 45px;margin-top: 20px;">
        <label id="pwd" for="payPwd" class="password-lable">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <input id="payPwd" type="text" maxlength="6" autocomplete="off">
        </label>
</div>
</body>
<script>
    layui.use('element', function(){
        var element = layui.element;
    });
    $("#moneyInput").bind('input propertychange', function() {
        let val = $(this).val()%50;
        if($(this).val() !== "" && val != 0) {
            $(this).addClass("layui-form-danger");
            $(".tip").css("display","block");
        } else {
            $(this).removeClass("layui-form-danger");
            $(".tip").css("display","none");
        }
    })
    $("#loanBtn").click(function () {

        //禁用按钮
        var btn = this;
        $(btn).addClass("layui-btn-disabled");
        btn.disabled = true;

        //判断充值金额是否正确
        var moneyVal = $("#moneyInput").val();

        if (moneyVal == "" || moneyVal == null) {
            layer.msg("请输入充值金额");
            $(btn).removeClass("layui-btn-disabled");
            btn.disabled = false;
            return;
        }
        if (moneyVal % 50 != 0) {
            layer.msg("充值金额必须为50的倍数");
            $(btn).removeClass("layui-btn-disabled");
            btn.disabled = false;
            return;
        }

        var userMoney = [[${myUserInfo.money}]];
        if (userMoney < moneyVal) {
            layer.msg("账户余额不足")
            $(btn).removeClass("layui-btn-disabled");
            btn.disabled = false;
            return;
        }

        var bidMoney = [[${looseBid.money - sumMoney}]]
        if (moneyVal > bidMoney) {
            layer.msg("出借金额大于该散标剩余金额!");
            $(btn).removeClass("layui-btn-disabled");
            btn.disabled = false;
            return;
        }

        layer.open({
            type: 1,
            title: '输入支付密码',
            skin: 'layui-layer-demo', //样式类名
            area: ['280px', '120px'],
            shadeClose: true,
            fixed: true, //不固定
            maxmin: true,
            content: $('#password-div'),
            end: function () {
                $("#payPwd").val("");
                $("#pwd ul li").each(function (i,e) {
                    console.log($(this).text(""));
                })
            }
        });
        $("#payPwd").focus();
        $(btn).removeClass("layui-btn-disabled");
        btn.disabled = false;
    })
    $("#payPwd").bind('input propertychange', function() {
        if (this.value.length === 6) {
            var money = $("#moneyInput").val();
            loan(money,$(this).val());
        }
    })
    function loan(money,payPwd) {
        var loading = layer.load(2, {shade: false});
        var lbId = [[${looseBid.id}]];

        $.ajax({
            url: "/loanLooseBid",
            type: "post",
            data: {
                'payPwd': payPwd,
                'lbId': lbId,
                'money': money
            },
            dataType: "json",
            success: function (data) {
                layer.close(loading);
                if (data.status == "success") {
                    layer.msg('投资成功',{icon:1,time:3000})
                    setTimeout(()=>{
                        window.location.reload();
                    },3000)
                } else if (data.status == "warning") {
                    layer.confirm('被人抢先一步，现在这个散标只剩 <span style="color: #ff5722">'+data.money+'</span> 元了，还要继续投资吗？', {
                        btn: ['继续','取消'] //按钮
                    }, function(index){
                        layer.close(index);
                        loan(data.money,payPwd);
                    }, function(){

                    });
                } else if (data.status == "error") {
                    layer.msg(data.msg,{icon:2,time:3000})
                } else {
                    layer.msg(data.status);
                }
            },
            error: function () {
                layer.close(loading);
                layer.msg('服务器繁忙 请稍后再试',{time:2000,icon:2});
            }
        })
    }
</script>
<script>
    //查询支付密码
    $(".password-div input").on("input",function(e){ //标签为password-div下的input添加oninput事件
        var number = 6;   //定义输入最大值
        var pw = $("#payPwd").val(); //
        var list = $(".password-div ul li");  //定义list是li
        for(var i = 0; i < number ; i++){    //for循环遍历将·放入li标签
            if(pw[i]){
                $(list[i]).text("•");
            }else{
                $(list[i]).text("");
            };
        };
    });
    $(".password-div ul").click(function(){
        $("#payPwd").val("");
        $("#payPwd").focus();
        $(".password-div ul li").text("");
    });
</script>
</html>